<script lang="ts" setup>
import type { GrowCardItem } from './data';

import type { Analysis } from '#/api/dashboard/model';

import { reactive } from 'vue';

import {
  AnalysisChartCard,
  AnalysisOverview,
  WorkbenchHeader,
} from '@vben/common-ui';
import {
  SvgdeviceIcon,
  SvginfoIcon,
  SvgonlineIcon,
  SvgproductIcon,
} from '@vben/icons';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

import { getCountStatistics } from '#/api/dashboard/analysis';

import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';

const userStore = useUserStore();

const growCardList: GrowCardItem[] = reactive([
  {
    title: '产品数量',
    title1: '正常',
    title2: '禁用',
    botTitle: '',
    icon: SvgproductIcon,
    value: 0,
    value1: 0,
    value2: 0,
  },
  {
    title: '设备数量',
    title1: '在线',
    title2: '离线',
    icon: SvgdeviceIcon,
    botTitle: '',
    value: 0,
    value1: 0,
    value2: 0,
  },
  {
    title: '当前在线',
    botTitle: '昨日在线',
    icon: SvgonlineIcon,
    value: 0,
    value1: 0,
  },
  {
    title: '今日设备消息量',
    botTitle: '当月设备消息量',
    icon: SvginfoIcon,
    value: 0,
    value1: 0,
  },
]);

async function fetchData() {
  const response: Analysis | undefined = await getCountStatistics();
  console.log(response, 'response');

  if (
    growCardList[0] &&
    growCardList[1] &&
    growCardList[2] &&
    growCardList[3]
  ) {
    growCardList[0].value = response.productCount;
    growCardList[0].value1 = response.productCount;
    growCardList[0].value2 = 0;
    growCardList[1].value = response.deviceCount;
    growCardList[1].value1 = response.onlineCount;
    growCardList[1].value2 = response.offlineCount;
    growCardList[2].value = response.onlineCount;
    growCardList[2].value1 = response.yesterdayOnlineCount;
    growCardList[3].value = response.todayMessageCount;
    growCardList[3].value1 = response.monthMessageCount;
  }
}
fetchData();
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      class="mb-5 w-full"
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
      </template>
    </WorkbenchHeader>
    <AnalysisOverview :items="growCardList" />

    <div class="mt-5 w-full md:flex">
      <AnalysisChartCard
        class="relative mt-5 md:mr-4 md:mt-0 md:w-1/2"
        title="注册设备数"
      >
        <AnalyticsVisitsData />
      </AnalysisChartCard>
      <AnalysisChartCard
        class="relative mt-5 md:mt-0 md:w-1/2"
        title="同时在线设备数"
      >
        <AnalyticsVisitsSource />
      </AnalysisChartCard>
    </div>
  </div>
</template>
